<!--
author: 何其沆(pooky)
desc: Pool - Account Pool - File Check
date: 2021-11-12
-->
<template>
  <div class="card">
    <div class="page-search">
      <div class="search-text">Selected Files:</div>
      <div class="upload-area">
        <input
          ref="uploadInput"
          type="file"
          style="display: none"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          @change="uploadFileChange" />
        <a-input style="width: 360px; margin-right: 8px" :readonly="true" :value="fileName" />
        <a-button style="background: #f0f2f7; color: #3c6cfe; border: none" @click="handleClickUpload">
          <template #icon>
            <e-icon type="upload" style="margin-right: 8px" />
          </template>
          Select Files to Upload
        </a-button>
      </div>
      <div class="tips">
        Tips : Please upload Excel 2007 or higher version. The resulting file will be downloaded automatically
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, inject } from 'vue'
import EIcon from '@/components/EIcon.vue'
import Pool from '@/api/pool.js'
import Util from '@/utils'
import { IMPORT_SUCCEEDED } from '@/constants/message'
const { message } = inject('Feedback')
// 获取数据
const uploadInput = ref(null)
const fileName = ref('')
/**
 * 选择文件
 */
const handleClickUpload = () => {
  uploadInput.value.click()
}
/**
 * 文件上传
 * @param event
 */
const uploadFileChange = event => {
  if (event.target.files.length > 0) {
    if (event.target.files[0].name.split('.').pop() !== 'xlsx') {
      message.error('Please upload Excel 2007 or higher version')
    } else {
      fileName.value = event.target.files[0].name
      const fileForm = new FormData()
      fileForm.append('file', event.target.files[0])
      Pool.fileCheck(fileForm)
        .then(res => {
          if (res.type === 'application/json') {
            const reader = new FileReader()
            reader.readAsText(res, 'utf-8')
            reader.onload = () => {
              if (JSON.parse(reader.result).code === 2000) {
                message.success(IMPORT_SUCCEEDED)
              } else {
                message.error('Excel Error!')
              }
            }
          } else {
            message.success("Download success, Please check your browser's download records")
            Util.downloadBlob(
              res,
              'result(' + fileName.value.split('.')[0] + ').xlsx',
              'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            )
          }
          uploadInput.value.value = null
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped lang="less">
.card {
  width: 100%;
  height: 628px;
  overflow-y: auto;
  background-color: @white;
  border-radius: 0 4px 4px 4px;
  box-shadow: 0 1px 3px @shadow-color;
  padding: 24px;
  box-sizing: border-box;
  .page-search {
    position: relative;
    padding-bottom: 24px;
    font-size: 14px;
    color: @deep-gray;
    .upload-area {
      margin: 8px 0 16px;
      :deep(.ant-btn) {
        background-color: @white !important;
        border: 1px solid @primary-color !important;
      }
    }
  }
  .buttons {
    text-align: center;
    margin-top: 24px;
    .check {
      border-color: @function;
      background-color: @function;
      color: @white;
      margin-left: 24px;
      &:focus,
      &:hover {
        background-color: @function-hover;
        border-color: @function-hover;
      }
    }
  }
}
</style>
